<template>
  <div class="hotel-detail-component">
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="15" animated />
    </div>
    
    <template v-else-if="hotel">
      <!-- 酒店主体内容 -->
      <div class="hotel-body">
        <el-row :gutter="20">
          <!-- 左侧内容 -->
          <el-col :lg="16" :md="24">
            <!-- 酒店图片轮播 -->
            <div class="hotel-gallery">
              <el-carousel 
                v-if="(hotel.pictures || hotel.images) && (hotel.pictures || hotel.images).length > 0" 
                :interval="4000" 
                arrow="always" 
                height="400px"
                indicator-position="none"
              >
                <el-carousel-item v-for="(image, index) in (hotel.pictures || hotel.images)" :key="index">
                  <div class="carousel-item">
                    <img :src="image.path || image.url || image.src" :alt="image.name || image.title || '酒店图片'" class="carousel-image">
                    <div v-if="image.name || image.title" class="image-caption">{{ image.name || image.title }}</div>
                  </div>
                </el-carousel-item>
              </el-carousel>
              
              <div v-else class="no-image">
                <el-icon :size="60"><Picture /></el-icon>
                <p>暂无酒店图片</p>
              </div>
            </div>
            
            <!-- 酒店介绍 -->
            <el-card class="hotel-description-card">
              <template #header>
                <div class="card-header">
                  <h2>酒店介绍</h2>
                </div>
              </template>
              
              <div class="hotel-description" v-html="hotel.shortDesc || '暂无酒店介绍'">
              </div>
            </el-card>
            
            <!-- 酒店设施 -->
            <el-card class="hotel-facilities-card">
              <template #header>
                <div class="card-header">
                  <h2>酒店设施</h2>
                </div>
              </template>
              
              <div v-if="getHotelFacilities(hotel) && getHotelFacilities(hotel).length > 0" class="facilities-container">
                <el-row :gutter="20">
                  <el-col :span="8" v-for="(facility, index) in getHotelFacilities(hotel)" :key="index">
                    <div class="facility-item">
                      <el-tag 
                        size="small" 
                        type="success" 
                        effect="plain"
                      >
                        {{ facility }}
                      </el-tag>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <el-empty v-else description="暂无设施信息"></el-empty>
            </el-card>
            
            <!-- 交通信息 -->
            <el-card v-if="hotel.traffic || hotel.businessarea" class="traffic-card">
              <template #header>
                <div class="card-header">
                  <h2>位置信息</h2>
                </div>
              </template>
              
              <div class="traffic-info">
                <p v-if="hotel.businessarea"><strong>商业区：</strong>{{ hotel.businessarea }}</p>
                <p v-if="hotel.traffic"><strong>交通：</strong>{{ hotel.traffic }}</p>
              </div>
            </el-card>
          </el-col>
          
          <!-- 右侧内容 -->
          <el-col :lg="8" :md="24">
            <!-- 预订卡片 -->
            <el-card class="booking-card">
              <template #header>
                <div class="card-header">
                  <h2>预订房间</h2>
                </div>
              </template>
              
              <el-form :model="bookingForm" label-position="top">
                <el-form-item label="入住日期">
                  <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="入住日期"
                    end-placeholder="离店日期"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                  ></el-date-picker>
                </el-form-item>
                
                <el-button type="primary" @click="viewRooms" class="check-rooms-btn">
                  查看可用房型
                </el-button>
              </el-form>
            </el-card>
            
            <!-- 酒店基本信息卡片 -->
            <el-card class="hotel-info-card">
              <template #header>
                <div class="card-header">
                  <h2>基本信息</h2>
                </div>
              </template>
              
              <el-descriptions :column="1" border>
                <el-descriptions-item v-if="hotel.hotelCode" label="酒店编码">
                  {{ hotel.hotelCode }}
                </el-descriptions-item>
                
                <el-descriptions-item v-if="hotel.tel" label="电话">
                  <el-icon><Phone /></el-icon> {{ hotel.tel }}
                </el-descriptions-item>
                
                <el-descriptions-item v-if="hotel.fax" label="传真">
                  <el-icon><Phone /></el-icon> {{ hotel.fax }}
                </el-descriptions-item>
                
                <el-descriptions-item v-if="hotel.openDate" label="开业时间">
                  <el-icon><Calendar /></el-icon> {{ hotel.openDate }}
                </el-descriptions-item>
                
                <el-descriptions-item v-if="hotel.fitment" label="装修时间">
                  <el-icon><Brush /></el-icon> {{ hotel.fitment }}
                </el-descriptions-item>
                
                <el-descriptions-item v-if="hotel.rank" label="酒店星级">
                  {{ getRankName(hotel.rank) }}
                </el-descriptions-item>
                
                <el-descriptions-item v-if="hotel.commentPoint" label="酒店评分">
                  {{ hotel.commentPoint }} 分
                </el-descriptions-item>
                
                <el-descriptions-item v-if="hotel.brandName" label="品牌">
                  {{ hotel.brandName }}
                </el-descriptions-item>
                
                <el-descriptions-item v-if="hotel.cityName" label="城市">
                  {{ hotel.cityName }}
                </el-descriptions-item>
                
                <el-descriptions-item v-if="hotel.address" label="地址">
                  {{ hotel.address }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
            
            <!-- 房型信息提示 -->
            <el-card v-if="hotel.rooms && hotel.rooms.length > 0" class="rooms-info-card">
              <template #header>
                <div class="card-header">
                  <h2>房型信息</h2>
                </div>
              </template>
              
              <el-alert
                type="info"
                :closable="false"
                show-icon
              >
                <template #title>
                  点击下方【查看可用房型】按钮查看完整房型列表和价格
                </template>
              </el-alert>
              
              <div class="rooms-summary">
                <p><strong>可用房型：</strong>{{ hotel.rooms.length }} 种</p>
                <p v-if="hotel.minPrice"><strong>最低价格：</strong>¥{{ hotel.minPrice.toFixed(2) }} / 晚</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </template>
    
    <el-empty v-else description="未找到酒店信息" class="empty-result">
      <template #image>
        <el-icon :size="60"><WarningFilled /></el-icon>
      </template>
      <template #description>
        <p>未找到酒店信息</p>
        <p class="empty-suggestion">请返回搜索页面重新查询</p>
      </template>
    </el-empty>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { getHotelDetail } from '../api/hotelApi';
import { ElMessage } from 'element-plus';
import { 
  Picture, 
  Phone, 
  Calendar, 
  Brush, 
  DArrowRight, 
  DArrowLeft,
  WarningFilled
} from '@element-plus/icons-vue';

const props = defineProps({
  hotelId: {
    type: [String, Number],
    required: true
  }
});

const emit = defineEmits(['view-rooms']);

const loading = ref(true);
const hotel = ref(null);

// 获取当前日期和明天日期
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);

const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 日期范围
const dateRange = ref([formatDate(today), formatDate(tomorrow)]);

// 预订表单
const bookingForm = reactive({
  checkInDate: formatDate(today),
  checkOutDate: formatDate(tomorrow)
});

// 监听日期范围变化
watch(dateRange, (newVal) => {
  if (newVal && newVal.length === 2) {
    bookingForm.checkInDate = newVal[0];
    bookingForm.checkOutDate = newVal[1];
  }
});

// 获取酒店设施列表（从字符串解析）
const getHotelFacilities = (hotel) => {
  if (!hotel) return [];
  
  // hotelAmenities可能是字符串或数组
  if (typeof hotel.hotelAmenities === 'string') {
    // 如果是逗号分隔的字符串
    return hotel.hotelAmenities.split(',').filter(f => f.trim());
  } else if (Array.isArray(hotel.hotelAmenities)) {
    return hotel.hotelAmenities;
  }
  
  return [];
};

// 星级名称映射
const getRankName = (rank) => {
  const rankMap = {
    'S1': '一星级',
    'S2': '二星级',
    'S3': '三星级',
    'S4': '四星级',
    'S5': '五星级',
    'A1': '准一星级',
    'A2': '准二星级',
    'A3': '准三星级',
    'A4': '准四星级',
    'A5': '准五星级'
  };
  return rankMap[rank] || rank;
};

const fetchHotelDetail = async () => {
  loading.value = true;
  
  try {
    const params = {
      hotelCode: props.hotelId,  // 使用hotelCode作为主要参数
      checkInDate: bookingForm.checkInDate,
      checkOutDate: bookingForm.checkOutDate,
      adultCount: 1,  // 默认成人数量
      childCount: 0   // 默认儿童数量
    };
    
    const response = await getHotelDetail(params);
    
    console.log('酒店详情API响应:', response);
    
    if (response.data) {
      // 适配新API的响应数据格式
      hotel.value = response.data;
    } else {
      ElMessage.error(`获取酒店详情失败: ${response.msg || response.message || '未知错误'}`);
    }
  } catch (error) {
    console.error('获取酒店详情出错:', error);
    ElMessage.error('获取酒店详情出错，请稍后重试');
  } finally {
    loading.value = false;
  }
};

const viewRooms = () => {
  emit('view-rooms', props.hotelId);
};

// 监听hotelId变化，重新获取酒店详情
watch(() => props.hotelId, (newVal) => {
  if (newVal) {
    fetchHotelDetail();
  }
}, { immediate: true });
</script>

<style scoped>
.hotel-detail-component {
  width: 100%;
}

/* 加载状态 */
.loading-container {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* 酒店主体内容 */
.hotel-body {
  width: 100%;
}

/* 酒店图片轮播 */
.hotel-gallery {
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.carousel-item {
  height: 100%;
  position: relative;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  text-align: center;
}

.no-image {
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  color: #909399;
}

/* 卡片样式 */
.hotel-description-card,
.hotel-facilities-card,
.traffic-card,
.booking-card,
.hotel-info-card,
.rooms-info-card {
  margin-bottom: 30px;
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

/* 酒店介绍 */
.hotel-description {
  line-height: 1.8;
  color: #606266;
}

/* 设施和服务 */
.facilities-container {
  padding: 10px 0;
}

.facility-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

/* 交通信息 */
.traffic-info {
  line-height: 1.8;
  color: #606266;
}

.traffic-info p {
  margin: 10px 0;
}

/* 房型信息提示 */
.rooms-summary {
  margin-top: 15px;
  line-height: 2;
}

.rooms-summary p {
  margin: 8px 0;
  font-size: 14px;
  color: #606266;
}

/* 预订卡片 */
.booking-card {
  background-color: #f5f7fa;
  border: 1px solid #ebeef5;
}

.check-rooms-btn {
  width: 100%;
  margin-top: 10px;
}

/* 空结果 */
.empty-result {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-suggestion {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
  margin-bottom: 20px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .facility-item,
  .service-item {
    margin-bottom: 10px;
  }
}
</style>
